<template>
<view>
<!--pages/article/lanmu/index.wxml-->
<view class="lanmu-fixed">
  <view class="scolls" v-if="bsylistData!=''">
    <view style="padding: 0 40rpx;">
      <scroll-view scroll-x="true" scroll-with-animation="true">
        <block>
          <view class="blockbox">
            <view v-for="(item, index) in bsylistData" :key="index" class="flex-col chax" @tap="menuClick" :data-id="item.id" :data-classname="item.classname" :data-index="index" :data-pagetype="item.pagetype">
              <!-- <text :class="[item.checked?'seltext':'noseltext']">{{item.classname}}</text> -->
              <text :class="menuIndex==index?'seltext':'noseltext'">{{item.classname}}</text>
              <view class="line" v-if="menuIndex==index"></view>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>

  <view class="lanmus" v-if="onelmList!=''">
    <view style="margin: 0 35rpx;border-bottom: 1px solid #e8e8e8;">
      <scroll-view scroll-x="true" scroll-with-animation="true">
        <block>
          <view class="blockbox">
            <view v-for="(item, index) in onelmList" :key="index" @tap="lanmuClick" class="lanmu-list" :data-id="item.id" :data-classname="item.classname" :data-index="index" :data-pagetype="item.pagetype">
              <text :class="item.checked?'lanmutext':'noseltext'">#{{item.classname}}#</text>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>
</view>

<view :style="'padding-top: ' + (menuHeight + lanmuHeight ) + 'px'">
  <!-- 文章列表 -->
  <navigator v-for="(item, index) in articleList" :key="index" class="content" :url="'/pages/article/detail/detail?id=' + item.id + '&type=' + item.pagetype + '&city=' + citycode" hover-class="none">
    <view class="title">
      <text>{{item.title}}</text>
      <view class="zuan-time">
        <view class="time">{{item.publictime}}</view>
      </view>
    </view>
    <image :src="item.images" v-if="item.images" mode="aspectFill"></image>
  </navigator>
  <!-- <view v-if="articleList.length>=1">
    <uni-load-more :status="requestStatus"></uni-load-more>
  </view> -->

  <!-- null-->
  <view>
    <image src="http://imgbdb3.bendibao.com/xcx/202011/13/20201113154945_55324.gif" mode style="width: 100%;" v-if="showLoading"></image>
    <view class="null-box" v-if="articleList==''&& shownull">
      <image src="http://imgbdb3.bendibao.com/xcx/202011/13/20201113155035_59183.png"></image>
      <view class="texts">抱歉，暂未开通
        <text style="color:#f60">{{classname}}</text> 相关栏目。</view>
      <view class="texts">建议您先查看其它栏目内容！</view>
    </view>
  </view>
</view>
</view>
</template>

<script>
// pages/article/lanmu/index.js
//获取应用实例
const app = getApp();
const util = require("../../../utils/util.js");
var page = 1;

export default {
  data() {
    return {
      menuIndex: 0,
      articleList: [],
      lanmuData: [],
      bsylistData: [],
      onelmList: [],
      twolmList: [],
      showLoading: false,
      shownull: false,
      lanmuHeight: 0,
      menuHeight: 0,
      classname: "",
      classid: "",
      type: "",
      citycode: "",
      pindex: ""
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    page = 1;
    this.setData({
      classid: options.id ? options.id : '',
      type: options.type ? options.type : '',
      citycode: options.city ? options.city : uni.getStorageSync("citycode") ? uni.getStorageSync("citycode") : 'sz',
      menuIndex: options.menuIndex ? options.menuIndex : 0 // name: options.name ? decodeURIComponent(options.name):""

    });
    util.getUrl(app.globalData.url).then(res => {
      this.getbsylist();
      this.getArticleInfo(this.classid, 1);
    });
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    page++;
    this.getArticleInfo(this.classid, page);
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    // 办事频道
    getbsylist() {
      let data = {
        citycode: this.citycode == "sz" ? "bsy" : this.citycode,
        action: "sitelist",
        pagesize: 4,
        bsy: 1,
        version: app.globalData.version
      };
      util.request('index.php', data, 'GET').then(res => {
        if (res.data && Array.isArray(res.data)) {
          this.setData({
            bsylistData: res.data
          });
          res.data.forEach((v, k) => {
            if (v.id == this.classid) {
              this.setData({
                pindex: k
              });
              this.getOnelm(this.classid);
            }
          });
          setTimeout(res => {
            var query = uni.createSelectorQuery();
            query.select('.scolls').boundingClientRect(res => {
              this.setData({
                menuHeight: res != null ? res.height + 10 : 0
              });
            }).exec();
          }, 100);
        }
      });
    },

    // 获取一级子栏目列表
    getOnelm(classid) {
      let lanmuData = {
        action: "classlist",
        citycode: this.type == 'wenda' ? 'wenda' : this.type == 'bsy' && this.citycode == 'sz' ? 'bsy' : this.citycode,
        classid
      };
      util.request('index.php', lanmuData, 'GET').then(res => {
        if (res.data) {
          res.data.forEach((v, k) => {
            v.checked = false;
          });
          this.setData({
            onelmList: res.data
          }); // this.onelmList = res.data;
        }

        setTimeout(res => {
          var query = uni.createSelectorQuery();
          if (this.onelmList) query.select('.lanmus').boundingClientRect(res => {
            this.setData({
              lanmuHeight: res != null ? res.height : 0
            });
          }).exec();
        }, 100);
      });
    },

    // 获取栏目文章列表
    getArticleInfo(classid, page) {
      let infoData = {
        citycode: this.type == 'wenda' ? 'wenda' : this.type == 'bsy' && this.citycode == 'sz' ? 'bsy' : this.citycode,
        action: 'list',
        // city: this.data.city,
        pagesize: 10,
        classid,
        page // timestamp: new Date().getTime(),

      };
      util.request('index.php', infoData, 'GET').then(res => {
        // if (res.data == "") {
        //   this.requestStatus = "noMore";
        // }
        this.setData({
          articleList: this.articleList.concat(res.data)
        }); // if (this.articleList.length < 15) {
        //   this.requestStatus = "noMore";
        // }

        this.setData({
          showLoading: false
        });

        if (this.articleList == "") {
          this.setData({
            shownull: true
          });
        }
      });
    },

    // 一级栏目点击
    menuClick(e) {
      let id = e.currentTarget.dataset.id;
      let classname = e.currentTarget.dataset.classname;
      let index = e.currentTarget.dataset.index;
      let pagetype = e.currentTarget.dataset.pagetype;
      this.setData({
        menuIndex: index
      }); // this.menuIndex = index;

      this.onelmList.forEach((v, k) => {
        if (index == k) {
          v.checked = true;
        } else {
          v.checked = false;
        }
      });
      this.setData({
        onelmList: this.onelmList,
        articleList: [],
        classid: id,
        type: pagetype,
        classname: classname,
        showLoading: true,
        shownull: false
      }); // this.getTwolm(item.id)

      this.getOnelm(id);
      this.getArticleInfo(id, 1);
    },

    // 二级栏目点击
    lanmuClick(e) {
      let id = e.currentTarget.dataset.id;
      let classname = e.currentTarget.dataset.classname;
      let index = e.currentTarget.dataset.index;
      let pagetype = e.currentTarget.dataset.pagetype;
      this.onelmList.forEach((v, k) => {
        if (index == k) {
          v.checked = true;
        } else {
          v.checked = false;
        }
      });
      this.setData({
        onelmList: this.onelmList,
        articleList: [],
        classid: id,
        type: pagetype,
        classname: classname,
        showLoading: true,
        shownull: false
      });
      this.getArticleInfo(id, 1);
    }

  }
};
</script>
<style>
.lanmu-fixed {
  position: fixed;
  top: 0;/*  #ifdef  H5  */
  top: calc(88rpx + constant(safe-area-inset-top));
  top: calc(88rpx + env(safe-area-inset-top));/*  #endif  */
  width: 100%;
  background-color: #fff;
  z-index: 99;
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.navbar {
  position: fixed;
  background-color: #fff;
  z-index: 1;
  width: 100%;
}

.search {
  margin: 0 40rpx;
}

.search  .back {
  width: 60rpx;
}

.search  .left-img {
  width: 22rpx;
  height: 38rpx;
  z-index: 10;
}

.pick {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.sel-img {
  width: 22rpx;
  height: 16rpx;
  margin-left: 10rpx;
}

.scolls {
  width: 100%;
  border-bottom: 15rpx solid #f5f5f5;
  margin-top: 30rpx;
  z-index: 1;
}

.lanmus {
  width: 100%;
  z-index: 1;
}

.lanmu-list {
  margin-right: 20rpx;
  padding: 15rpx 0;
}

.lanmutext {
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  color: #f60;
}

.blockbox {
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
}

.chax {
  margin-right: 40rpx;
}

.seltext {
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  color: #242424;
  margin-bottom: 15rpx;
}

.noseltext {
  font-size: 30rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  color: #828282;
  margin-bottom: 22rpx;
}

.line {
  border: 6rpx solid #f60;
  width: 46rpx;
  border-radius: 40rpx;
}

.content {
  border-bottom: 1rpx solid #f5f5f5;
  padding: 20rpx 0;
  display: flex;
  align-items: center;
  margin: 10rpx 30rpx 0 30rpx;
}

.content .title {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
}

.content text {
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
}

.content image {
  width: 188rpx;
  height: 120rpx;
  border-radius: 4rpx;
  margin-left: 20rpx;
}

.time {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  margin-top: 15rpx;
}

.zuan-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15rpx;
  width: 100%;
}

.zuanti {
  border: 2rpx solid rgba(255, 102, 0, 1);
  opacity: 1;
  border-radius: 16rpx;
  font-size: 18rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 102, 0, 1);
  padding: 5rpx 12rpx;
}

.null-box {
  text-align: center;
  margin-top: 400rpx;
}

.null-box image {
  width: 422rpx;
  height: 268rpx;
}

.texts {
  font-size: 28rpx;
  font-family: PingFang SC, PingFang SC-Medium;
  font-weight: 500;
  text-align: center;
  color: #a7a6a6;
  margin-top: 26rpx;
}

</style>